<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>timeline</title>
		<meta name="description" content="Blueprint: Slide and Push Menus" />
		<meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		
		<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
		<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
		
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/timeline_component.css" />
		<script src="js/modernizr.custom.js"></script>
		
		
	</head>
	<body>
		<div class="main">
				
			
					<ul class="cbp_tmtimeline">
					<% _.each( leggi.models, function (legge) { console.log(legge); %>
					<li>
						<time class="cbp_tmtime" ><span><%= legge.get("Data").slice(6,8) + "-" + legge.get("Data").slice(4,6) + "-" + legge.get("Data").slice(0,4) %></span></time>
						<div class="cbp_tmicon "><img src="img/calendar.png"></div>
						<div class="cbp_tmlabel">
							
							<div class="chart_container" id="chart_<%= legge.get('Id') %>" style="height: 250px;">
								<img  style="margin-left:2em;" width="90%" src="img/mag_rossi200.png">	
						</div>
							
							
							<h2>Progetto di legge</h2>
							<p>
								<%= legge.get("Titolo") %>
							</p>
							<h4><% var c =legge.get("Creatori").split(","); 
									if(c.length > 2) {
										if((c.length-2) == 1){
											var str = "e un altro.";
										} else {
											var str = "e altri " + (c.length - 2);
										}
									print(c[0] +"," + c[1] + str); }
									else {
									print(legge.get("Creatori"));
									} %> </h4> 
							
							
						<h3>Esprimi la tua opinione</h3>
							
							
								
										<button class="feed_button feedb_positive" value="<%= legge.get('Id') %>">Favorevole</button>  
									
										<button class="feed_button feedb_negative" value="<%= legge.get('Id') %>">Non favorevole</button>
										 
					
					
				
				<div class="tm_comments">
						<!-- form to write comments! -->
						 	<div class="com_row">
						 	<div class="com_avatar">
									<img src="./img/accountTwitter.jpg">
								</div>
						 		<div class="com_input">
						 		<form method="post" class="submit_post" onSubmit="return false">
							 		<p><textarea placeholder="Scrivi un commento..."></textarea></p>
							 		<input type="hidden" value="<%= legge.get('Id') %>">
							 		<p style="height: 10px;"><button class="comm_button" formaction="submit" title="">Commenta</button></p>
						 		</form>
						 		</div>
						 	</div>
						</div>
							
						<!-- comments -->
						<%  _.each( legge.get("Commenti"), function (commento) { console.log(commento);%>
							<div class="com_row">
								<div class="com_avatar">
									<img src="https://api.twitter.com/1/users/profile_image/<%= commento.id_utente %>">
								</div>
								<div class="com_text">
									<p <% if(commento.parlamentare == true){ print("class = \"nomeutente vip\"");} else {print("class = \"nomeutente\"");} %> ><%= commento.id_utente %></p>
									<p class="comm"><%= commento.testo %></p>
								</div>	
							</div>
						<% }); %>	
						</div>
					</li>
					<% }); %>
					<div id="loadhere"></div>
		</ul>	
				<section >
					<!-- Class "cbp-spmenu-open" gets applied to menu -->
					<button id="loadmore">CARICA PRECEDENTI</button>
				</section>
			
		</div>
		
		
		
	</body>
</html>
